<template>
  <view class="subsection-box">
    <ve-subsection class="subsection" :list="tabs" :current="current" active-color="#3072F6" @change="onSubsectionChange" />
  </view>

  <cost-details v-if="current == 0" :orderId="orderId" />
  <three-pay-order v-if="current == 1" :orderId="orderId" :bizType="1" dictCode="shortOrderDict" />
</template>

<script setup lang="ts">
  import CostDetails from './cost-details.vue'
  import ThreePayOrder from '@/pages/common/components/three-pay-order.vue'

  import { ref } from 'vue'

  defineProps({
    orderId: {
      type: String || Number,
    },
  })

  const tabs = [
    {
      name: '费用明细',
    },
    {
      name: '三方支付账单',
    },
  ]
  const current = ref(0)

  const onSubsectionChange = (value: number) => {
    console.log('onSubsectionChange', value)
    current.value = value
  }
</script>

<style lang="scss" scoped>
  .subsection-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    background-color: #fff;

    .subsection {
      width: 240px;
    }
  }
</style>
